﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>


<script src="~/js/echarts.js"></script>



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <h1>种母存栏</h1>
    <div id="echarts1" style="width: 500px;height: 500px;float:left;"></div>
    <h1>种公存栏</h1>
    <div id="echarts" style="width: 500px;height: 500px;float:right;"></div>

</body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rp5j6DYVV8tDQoOMrbQgAFxrAwnKvcWM"></script>

<script>
    var datas = [];
    var datas2 = [];
    
    $(function () {
        var myecharts = echarts.init(document.getElementById('echarts'));
        myecharts.showLoading({
            text: "正在努力的读取数据中。。。。。",
        })

        $.ajax({
            url: "http://localhost:5269/api/SheepECharts/SheepRecordBreedTypeQuery",
            data: JSON.stringify({ recordType: 1 }),
            type: "post",
            async: false,
            dataType: "json",
            contentType: "application/json",
            success: res => {
                console.log(res.data);
                datas = res.data;
            }

        })
        var option = {

            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: datas,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myecharts.hideLoading();    //隐藏加载动画
        myecharts.setOption(option);

        var myecharts1 = echarts.init(document.getElementById('echarts1'));
        myecharts1.showLoading({
            text: "正在努力的读取数据中。。。。。",
        })

        $.ajax({
            url: "http://localhost:5269/api/SheepECharts/SheepReproductiveState",
            data: JSON.stringify({ recordType: 0 }),
            type: "post",
            async: false,
            dataType: "json",
            contentType: "application/json",
            success: res => {
                console.log(res.data);
                datas2 = res.data;
            }

        })
        var option1 = {

            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: datas2,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myecharts1.hideLoading();    //隐藏加载动画
        myecharts1.setOption(option1);



    })

</script>

